<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration"></div>
    
    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 台标区域 -->
      <div class="logo-container">
        <div class="logo-bg">
          <img src="@/assets/logo.jpg" alt="东软之声广播台" class="logo" />
        </div>
        <h1 class="title">东软之声广播台</h1>
        <p class="subtitle">社团管理系统</p>
      </div>
      
      <!-- 登录表单 -->
      <form class="login-form" @submit.prevent="handleLogin">
        <!-- 用户名输入 -->
        <div class="form-group">
          <label class="label" for="username">
            <i class="icon-user"></i> 用户名
          </label>
          <input 
            type="text" 
            id="username" 
            v-model="username" 
            placeholder="请输入用户名" 
            required 
            class="input-field"
          />
        </div>
        
        <!-- 密码输入 -->
        <div class="form-group">
          <label class="label" for="password">
            <i class="icon-lock"></i> 密码
          </label>
          <input 
            type="password" 
            id="password" 
            v-model="password" 
            placeholder="请输入密码" 
            required 
            class="input-field"
          />
        </div>
        
        <!-- 身份选择（改为横排按钮） -->
        <div class="form-group role-selection">
          <label class="label">
            <i class="icon-role"></i> 登录身份
          </label>
          <div class="role-buttons">
            <button 
              type="button" 
              class="role-btn"
              :class="{ 'active': role === 'member' }"
              @click="role = 'member'"
            >
              部员
            </button>
            <button 
              type="button" 
              class="role-btn"
              :class="{ 'active': role === 'minister' }"
              @click="role = 'minister'"
            >
              部长
            </button>
            <button 
              type="button" 
              class="role-btn"
              :class="{ 'active': role === 'admin' }"
              @click="role = 'admin'"
            >
              管理员
            </button>
          </div>
        </div>
        
        <!-- 登录按钮 -->
        <button type="submit" class="login-btn" :disabled="loading">
          <span v-if="!loading">登录 <i class="icon-arrow"></i></span>
          <span v-else>登录中...</span>
        </button>

        <!-- 错误提示 -->
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
      </form>
      
      <!-- 底部信息 -->
      <div class="footer-info">
        <p>© 2025 东软之声广播台第23届 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

// 表单数据
const username = ref('')
const password = ref('')
const role = ref('member')
const loading = ref(false)
const errorMessage = ref('')

// 登录处理
const handleLogin = async () => {
  try {
    loading.value = true
    errorMessage.value = ''

    // 调用后端API进行登录验证
    const response = await fetch('http://localhost:8080/user/all')
    
    // 检查响应状态
    if (!response.ok) {
      throw new Error(`网络请求失败，状态码: ${response.status}`)
    }
    
    // 解析JSON数据
    const result = await response.json()
    
    // 检查API返回的数据结构
    if (result.code !== 200 || !Array.isArray(result.data)) {
      throw new Error('API返回数据结构异常')
    }
    
    // 查找匹配的用户
    const user = result.data.find(u => 
      u.username === username.value && 
      u.password === password.value && 
      u.role === role.value
    )

    if (user) {
      // 登录成功，存储用户信息
      authStore.login({
        id: user.id,
        username: user.username,
        role: user.role,
        studentId: user.studentId,
        position: user.position,
        departmentId: user.departmentId,
        joinTime: user.joinTime,
        status: user.status
      })

      // 存储到localStorage
      localStorage.setItem('userInfo', JSON.stringify({
        id: user.id,
        username: user.username,
        role: user.role,
        studentId: user.studentId,
        position: user.position,
        departmentId: user.departmentId,
        joinTime: user.joinTime,
        status: user.status
      }))
      
      // 根据角色跳转到不同页面
      // 修改为跳转到存在的路由
      router.push('/')
    } else {
      errorMessage.value = '用户名或密码错误，或身份不匹配'
    }
  } catch (error) {
    console.error('登录失败:', error)
    errorMessage.value = error.message || '登录失败，请检查网络连接'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

/* 登录容器 */
.login-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f8;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(76, 175, 80, 0.1) 0%, transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(76, 175, 80, 0.1) 0%, transparent 40%);
  z-index: 1;
}

/* 登录卡片 */
.login-card {
  position: relative;
  z-index: 2;
  width: 1000px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
}

/* 台标区域 */
.logo-container {
  text-align: center;
  padding: 35px 20px 25px;
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  color: white;
}

.logo-bg {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.title {
  font-size: 24px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
  font-weight: 300;
}

/* 表单样式 */
.login-form {
  padding: 35px 50px;
}

.form-group {
  margin-bottom: 22px;
}

.label {
  display: block;
  margin-bottom: 10px;
  color: #555;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.icon-user::before { content: "👤"; margin-right: 20px; }
.icon-lock::before { content: "🔒"; margin-right: 20px; }
.icon-role::before { content: "🎭"; margin-right: 20px; }
.icon-loading::before { content: "⏳"; margin-left: 8px; }  /* 加载图标 */

.input-field {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #fafafa;
}

.input-field:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
  background: white;
}

/* 身份选择按钮样式 */
.role-selection {
  margin-top: 25px;
  margin-bottom: 30px;
}

.role-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.role-btn {
  padding: 12px 30px;
  border: 2px solid #ddd;
  background-color: #f9f9f9;
  color: #555;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.role-btn:hover {
  border-color: #4CAF50;
  color: #4CAF50;
  background-color: rgba(76, 175, 80, 0.05);
}

.role-btn.active {
  border-color: #4CAF50;
  background-color: #4CAF50;
  color: white;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  padding: 15px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn:disabled {
  background: #a5d6a7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.icon-arrow::after { content: "→"; margin-left: 8px; }

.login-btn:not(:disabled):hover {
  background: #43a047;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

/* 底部信息 */
.footer-info {
  padding: 0 50px 30px;
  text-align: center;
}

.footer-info p {
  font-size: 13px;
  color: #999;
}

/* 原有样式保持不变，添加错误提示样式 */
.error-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #ffebee;
  color: #f44336;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.login-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
</style>